<template>
  <div>
    <div class="header">
      <div class="wp">
        <div class="col-l">
          <NuxtLink to="/" class="logo"><img src="/images/logo.svg" alt="" /></NuxtLink>
        </div>
        <div class="col-r">
          <div class="nav" :class="{ open: btnvisible }">
            <div class="item" :class="route.path === '/' ? 'on' : ''">
              <NuxtLink to="/" class="v1">首页</NuxtLink>
            </div>
            <div class="item" :class="route.path === '/market' ? 'on' : ''">
              <NuxtLink to="/market" class="v1">市场</NuxtLink>
            </div>
            <div class="item" :class="route.path === '/settled' ? 'on' : ''">
              <NuxtLink v-if="Cookies.get('author-status')=='APPROVED'||Cookies.get('author-status')=='APPROVED'" to="/Approved" class="v1">入驻申请</NuxtLink>
              <NuxtLink v-else-if="Cookies.get('author-status')=='FAILED'" to="/ReviewFailed" class="v1">入驻申请</NuxtLink>
              <NuxtLink v-else-if="Cookies.get('author-status')=='PENDING'" to="/inReview" class="v1">入驻申请</NuxtLink>
              <NuxtLink v-else to="/settled" class="v1">入驻申请</NuxtLink>
            </div>
            <div v-if="isEDITOR" class="item" :class="route.path === '/myWorks' ? 'on' : ''">
              <NuxtLink to="/myWorks" class="v1">创作中心</NuxtLink>
            </div>
          </div>
          <NuxtLink v-if="isLogin" to="/setup" class="h-login">个人中心</NuxtLink>
          <NuxtLink  v-else to="/login" class="h-login">登录账户</NuxtLink>
          <div class="h-lang" @click="visible = true">
            <global-outlined />
          </div>
          <!-- 已登录 -->
          <a-popover  placement="bottomLeft" overlayClassName="overlayClassName">
            <template #content>
              <div class="huser-pop">
                <div class="top">
                  <div class="img" :style="'background-image: url('+  defaultAvatar +')'"></div>
                  <div class="txt">
                    <div class="name">{{ Cookies.get('user-data')&&JSON.parse(Cookies.get('user-data')).name?Cookies.get('user-data')&&JSON.parse(Cookies.get('user-data')).name:'用户默认昵称' }}</div>
                    <div class="id">{{ Cookies.get('user-data')&&JSON.parse(Cookies.get('user-data')).email }}</div>
                  </div>
                </div>
                <div class="line"></div>
                <div v-if="isLogin" class="links">
                  <div class="lk">
                    <div class="icon">
                      <img src="/images/h-i3.svg" alt="">
                    </div>
                    <div class="ty"><NuxtLink to="/MyAssets">我的资产</NuxtLink></div>
                  </div>
                  <div  class="lk">
                    <div class="icon">
                      <img src="/images/h-i1.svg" alt="">
                    </div>
                    <div class="ty"><NuxtLink to="/setup">个人设置</NuxtLink></div>
                  </div>
                </div>
                <div class="line" style="margin-bottom: 14px;"></div>
                <div class="links">
                  <div @click="logOut" class="lk">
                    <div class="icon">
                      <img src="/images/h-i2.svg" alt="">
                    </div>
                    <div class="ty">退出登录</div>
                  </div>
                
                </div>
              </div>
            </template>
            <div class="h-user" v-if="Cookies.get('user-data')">
              <div class="img" :style="'background-image: url('+  defaultAvatar +')'"></div>
            </div>
          </a-popover>
          <span class="menuBtn" :class="{ open: btnvisible }" @click="btnvisible = !btnvisible">
            <b></b>
            <b></b>
            <b></b>
          </span>
        </div>
      </div>
    </div>

    <div class="fullpage" v-if="loading">
      <a-spin></a-spin>
    </div>
    <!-- 切换语言弹窗 -->
    <a-modal
      class="modal-content"
      v-model:visible="visible"
      title="选择地区语言"
      :width="665"
      :footer="null"
    >
      <ul class="lang-tab">
        <li v-for="(lang, index) in langs" :key="index">
          <div
            class="s"
            :class="{ active: lang.name === currentLang }"
            @click="changeLang(lang)"
          >
            {{ lang.name }}
          </div>
        </li>
      </ul>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import Cookies from 'js-cookie';
import { useRouter, useRoute } from "vue-router";
import { message } from 'ant-design-vue';

const route = useRoute();
const router = useRouter();

import { GlobalOutlined,PoweroffOutlined } from '@ant-design/icons-vue';
// 默认头像
const defaultAvatar = ref('/images/def-user.png');

const visible = ref(false)
const langs = [{ name: '简体中文', value: 'chinese_simplified' }, { name: '英语', value: 'english' }, { name: '日语', value: 'japanese' }, { name: '法语', value: 'french' },];

const btnvisible = ref(false)


const currentLang = ref('')
const isLogin = ref(false)
const isEDITOR = ref(false)

const loading = ref(false)
function logOut(){
  Cookies.set('user-data','')
  Cookies.set('user-tk','')
  Cookies.set('login-type','')
  isLogin.value=false
  isEDITOR.value=false
  message.success({
    content: () => '退出成功',
    class: 'custom-class',
    style: {
      marginTop: '20vh',
    },
  });
}
const changeLang = (lang) => {
  currentLang.value = lang.name
  loading.value = true
  console.log(lang.value);
  /* var loclang = localStorage.getItem('silentberrylang')
  if (lang.value === loclang) {
    // alert(1)
    // window.translate.changeLanguage(lang.value);
  } else {
    window.localStorage.setItem('silentberrylang', lang.value);
    window.translate?.changeLanguage(lang.value);
  } */
  setTimeout(() => {
    loading.value = false
    visible.value = false
  }, 300)
}
onMounted(()=>{
  if(Cookies.get('user-data')){
    isLogin.value=true
    if(JSON.parse(Cookies.get('user-data')).role=='EDITOR'){
      isEDITOR.value=true
    }else{
      isEDITOR.value=false
    }
  }else{
    isLogin.value=false
  }
})
</script>

<style>
</style>